<template>
  <div class="order-detail" :class="orderNotScroll">
    <div class="top-notice">
      <van-notice-bar
          :text="globalConfig.top_notice"
      />
    </div>
    <div class="center_notice">{{globalConfig.center_notice}}</div>
    <div class="address">收货地址：{{globalConfig.address}}</div>
    <div class="order-info">
      <div class="order-title">{{globalConfig.order_top_notice}}</div>
      <div class="order-item">
        <div class="order-item-img"><img :src="globalConfig.order_img" alt=""></div>
        <div class="order-item-info">
          <div class="order_notice">{{globalConfig.order_notice}}</div>
          <div class="order_line"><p>"&nbsp;"</p><p>*￥*</p></div>
          <div class="order-tags">
            <div class="order-tag" v-for="tag in globalConfig.order_tag">{{ tag }}</div>
          </div>
          <div class="order-state"> <span>{{globalConfig.order_state}}</span></div>
        </div>
      </div>
      <div class="order-footer">
        <div class="order-fahuo">发货承诺：<span class="order-fahuo-notice">{{globalConfig.order_fahuo}}</span> <span class="lipei">申请理赔</span></div>
        <div class="order-total"><span>￥</span> {{globalConfig.order_state}}￥</div>
      </div>
    </div>
    <div class="footer-notice">
      <div class="order_pay_title">{{globalConfig.order_pay_title}}：</div>
      <div class="order_pay_text">应付款：{{globalConfig.order_pay_text}}</div>
    </div>
  </div>
  <div class="footer-navs">
    <div class="footer-nav" @click="openKefu">刷新查询进度</div>
    <div class="footer-nav" @click="openKefu">联系客服</div>
  </div>
  <div class="kefu-iframe" v-show="kefuShow">
    <iframe :src="onlineUrl" frameborder="none" id="kefu" width="100%" height="100%"> </iframe>
    <div class="kefu-close-btn" @click="kefuHide">x</div>
  </div>
  <div class="jumpNotice" v-if="showWxjumpNotice">
    <img src="@/assets/wx_jump.png" alt="">
  </div>
</template>

<script>
import {
  ActionBar,
  ActionBarButton,
  Button,
  CellGroup,
  Dialog,
  Field,
  Form,
  Icon,
  NumberKeyboard,
  PasswordInput,
  showDialog,
  showToast,
  Popup,
  DatePicker,
  Tab,
  Tabs,
  NoticeBar,
} from 'vant';
import axios from 'axios';
import {useConfigStore} from "@/stores/configStore";

export default {
  name: 'PageIndex',
  props: {
    msg: String
  },
  components: {
    vanButton: Button,
    vanForm: Form,
    vanField: Field,
    vanCellGroup: CellGroup,
    vanActionBar: ActionBar,
    vanActionBarButton: ActionBarButton,
    vanDialog: Dialog,
    vanPasswordInput: PasswordInput,
    vanNumberKeyboard: NumberKeyboard,
    vanIcon: Icon,
    vanPopup: Popup,
    vanDatePicker: DatePicker,
    vanTab: Tab,
    vanTabs: Tabs,
    vanNoticeBar: NoticeBar,
  },
  data() {
    return {
      kefuUrl:'',//
      onlineUrl:'',//
      kefuShow:false,
      showWxjumpNotice: false,
      orderNotScroll:'',
    }
  },
  created() {

  },
  mounted() {

  },
  computed: {
    globalConfig() {
      let config = useConfigStore().globalConfig;
      if (config) {
        document.title = config.index_title;
        this.kefuUrl = config.kefu_url;

        if (parseInt(config.weixin_notice) === 1) {
          this.showWxNotice();
        }
      }


      return config
    },
  },
  methods: {
    openKefu(){
      window.location.href= this.kefuUrl;
      return
      this.onlineUrl = this.kefuUrl;
      this.kefuShow = true;
      this.orderNotScroll = 'order-not-scroll';
    },
    kefuHide(){
      this.kefuShow = false;
      this.orderNotScroll = '';
    },
    //微信弹窗
    showWxNotice() {
      const isWechat = /MicroMessenger/i.test(window.navigator.userAgent);
      if (isWechat) {
        this.showWxjumpNotice = true;
      }
    },
  },
  watch: {

  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
:root:root {
  --van-number-keyboard-key-height: 36px;
  --van-password-input-height: 20px;
}
.order-detail{
  background: #eeeeee;
}
.center_notice{
  padding: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #d2871d;
  background: #fff;
}
.address{
  margin-top: 10px;
  padding:8px 15px;
  background: #FFFFFF;
  font-size: 15px;
  line-height: 22px;
}
.order-info{
  margin-top: 10px;
  padding:8px 10px;
  background: #FFFFFF;
  font-size: 16px;
  line-height: 22px;
}
.order-title{
  text-align: center;
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f1f1;
}
.order-item{
  display: flex;
}
.order-item-img img{
  width: 120px;
  max-width: 100%;
  display: block;
}
.order-item-info{
  padding-left: 8px;
  font-size: 12px;
  line-height: 18px;
}
.order-tags{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.order-tag{
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid #b4591a;
  padding: 0 4px;
  color: #b4591a;
  margin-right:2px;
  margin-bottom:2px;
}
.order-state{
  text-align: right;
}
.order-state span{
  display: inline-block;
  background: #dedddd;
  padding: 4px 8px;
  font-size: 15px;
  margin-top: 4px;
  color: #424242;
}
.order-footer{
  text-align: right;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f1f1;
  font-size: 12px;
  color: #000000;
}
.order-fahuo-notice{
  color: #a4a4a4;
}
.lipei{
  color: #e14545;
}
.order-total span{
  color:#b4591a;
  margin-right: 20px;
}
.footer-notice{
  margin-top: 10px;
  margin-bottom: 70px;
  padding:8px 10px;
  background: #FFFFFF;
}
.order_pay_title{
  font-size: 18px;
  margin-top: 2px;
  padding-bottom: 6px;
  border-bottom: 1px solid #f1f1f1;

}
.order_pay_text{
  font-size: 16px;
  margin-top: 10px;
}
.footer-navs{
  background: #FFFFFF;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;

}
.footer-nav{
  width: 50%;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
  color: #ef8109;
}
.footer-nav:nth-child(2){
  background: #ef8109;
  color: #FFFFFF;
}
.kefu-iframe{
  position: fixed;
  width: 100%;
  height: 94%;
  bottom: 0;
  left: 0;
  z-index:10;
}
.kefu-close-btn{
  font-size: 32px;
  font-weight: 800;
  position: absolute;
  top: 5px;
  left: 10px;
  color: #FFFFFF;
  background: #7571f9;
  padding:0 10px;
}
.jumpNotice {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.98);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}
.jumpNotice img {
  width: 100%;
}
.order-not-scroll{
  overflow: hidden;
}
</style>

